<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<title>templates1</title>
<link rel="stylesheet" type="text/css" href="css/templates1.css">
</head>
<body>
<div class="page">
    <div class="wrap-header">
        <div id="header"><div class="inner-header">
            <a id="logo" href="#"><img src="http://placehold.it/200x100&text=logo" alt=""></a>
            <h1 class="visually-hidden">网站名称</h1>
            <div class="search-block">
                <form action="#" class="form-search-block">
                    <input type="search" class="search-text">
                    <input type="submit" value="搜索" class="search-submit">
                </form>
            </div>
            <div id="nav">
                <ul class="inline-float">
                    <li class="active"><a href="">首页</a></li>
                    <li><a href="">sassCore</a></li>
                    <li><a href="">布局模板</a></li>
                    <li><a href="">基础样式</a></li>
                    <li><a href="">常用结构</a></li>
                    <li><a href="">js交互</a></li>
                    <li><a href="">关于/联系</a></li>
                </ul>
            </div>
        </div></div>
    </div><!--wrap-header-->
    <div class="wrap-container">
        <div id="container" class="clearfix">
            <div id="main"><div class="inner-main">
                <div class="imgslide">
                  <div class="slide-view">
                    <ul class="inline-float">
                      <li><a title="图片一" href="#"><img alt="图片一" src="http://placehold.it/1000x340"></a></li>
                      <li><a title="" href="#"><img alt="" src="http://placehold.it/1000x340"></a></li>
                      <li><a title="" href="#"><img alt="" src="http://placehold.it/1000x340"></a></li>
                      <li><a title="" href="#"><img alt="" src="http://placehold.it/1000x340"></a></li>
                    </ul>
                  </div>
                  <div class="slide-control">
                    <p class="slide-title">标题，来自滚动图片的alt或图片链接a的title</p>
                    <div class="slide-bullet">
                      <a href="#" class="active">●</a>
                      <a href="#">●</a>
                      <a href="#">●</a>
                      <a href="#">●</a>
                    </div>
                  </div>
                  <div class="slide-prev-next"><a class="prev-btn" href="#">&lt;</a><a class="next-btn" href="#">&gt;</a></div>
                </div>
                <div class="col-three">
                    <div class="col">
                        <h2>君子生非异也，善假于物也</h2>
                        <div class="col-content">
                            <a href="#"><img src="http://placehold.it/320x160" alt=""></a>
                            <p>吾尝终日而思矣，不如须臾之所学也；吾尝跂而望矣，不如登高之博见也。登高而招，臂非加长也，而见者远；顺风而呼，声非加疾也，而闻者彰。假舆马者，非利足也，而致千里；假舟楫者，非能水也，而绝江河...<a href="#" class="more">更多>></a></p>
                        </div>
                    </div>
                    <div class="col">
                        <h2>君子生非异也，善假于物也</h2>
                        <div class="col-content">
                            <a href="#"><img src="http://placehold.it/320x160" alt=""></a>
                            <p>吾尝终日而思矣，不如须臾之所学也；吾尝跂而望矣，不如登高之博见也。登高而招，臂非加长也，而见者远；顺风而呼，声非加疾也，而闻者彰。假舆马者，非利足也，而致千里；假舟楫者，非能水也，而绝江河...<a href="#" class="more">更多>></a></p>
                        </div>
                    </div>
                    <div class="col">
                        <h2>君子生非异也，善假于物也</h2>
                        <div class="col-content">
                            <a href="#"><img src="http://placehold.it/320x160" alt=""></a>
                            <p>吾尝终日而思矣，不如须臾之所学也；吾尝跂而望矣，不如登高之博见也。登高而招，臂非加长也，而见者远；顺风而呼，声非加疾也，而闻者彰。假舆马者，非利足也，而致千里；假舟楫者，非能水也，而绝江河...<a href="#" class="more">更多>></a></p>
                        </div>
                    </div>
                </div>
            </div></div><!--main-->
        </div>
    </div><!--wrap-container-->
    <div class="wrap-footer">
        <div id="footer"><div class="inner-footer">
            <p>版权所有：<a href="http://w3cplus.com" target="_blank">w3cplus</a>，作者：<a href="http://weibo.com/2150465537" target="_blank">结一</a></p>
          <p>感谢<a href="http://weibo.com/311290005" target="_blank">大漠</a>，星河棋士及<a href="www.weibo.com/lcllao" target="_blank">Lcllao</a>的支持与帮助。</p>
        </div></div>
    </div><!--wrap-footer-->
</div>     
</body>
</html>